<template>
  <div class="login">
    <div class="login-wrap">
      <el-form
        class="login-form"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        label-width="100px"
      >
        <div class="img-container">
          <img src="../assets/img/login2.jpg" />
        </div>
        <h2>COOK BEST FOOD FOR YOU</h2>
        <el-form-item label="用户名" prop="userName">
          <el-input
            type="text"
            v-model="ruleForm.userName"
            prefix-icon="el-icon-user-solid"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="identify">
          <el-input
            v-model="ruleForm.identify"
            placeholder="仅支持'ad'和'cl'两种身份"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="warning"
            @click="handleLogin('ruleForm')"
            >登录</el-button
          >
          <el-link type="primary" @click="handleUpdatePassword">忘记记密码？</el-link>
          <el-link type="success" @click="handleRegister">没账号？</el-link>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>



  <script>
export default {
  data() {
    var checkIdentify = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份不能为空"));
      }
    };
    var validateuserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userName: "",
        password: "",
        identify: "",
      },
      rules: {
        userName: [{ validator: validateuserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        identify: [{ validator: checkIdentify, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleUpdatePassword: function () {
      this.$router.push({path: "/reSetPassword"})

    },
    handleRegister: function () {
      this.$router.push({ path: "/regist"});
    },
    handleLogin: async function () {
      if (this.ruleForm.identify == "ad") {
        const result = await this.$http.post("/adlogin", this.ruleForm);
        console.log(result.status);
        console.log(result);
        
        if (result.status == 200) {
          this.$message({
            type: "success",
            message: "管理员登陆成功",
          });
      
          localStorage.setItem("token", result.token);
          localStorage.setItem('user', JSON.stringify(result.data));
          console.log(result.data);



          this.$router.push({ path: "/" });
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码错误",
          });
        }
      } else if (this.ruleForm.identify == "cl") {
        const result = await this.$http.post("/cllogin", this.ruleForm);
        console.log(result.status);
        if (result.status == 200) {
          this.$message({
            type: "success",
            message: "登陆成功",
          });
          localStorage.setItem("token", result.token);
          localStorage.setItem('user', JSON.stringify(result.data));
          console.log(result.data);

          

          
          this.$router.push({ path: "/" });
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码错误",
          });
        }
      } else {
        this.$message({
          type: "error",
          message: '只支持"ad"和"cl"两种身份登录',
        });
      }
    },
  },
};
</script>


<style scoped>
.login-wrap {
  height: 400%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -50px;
}

.login-wrap .login-form {
  width: 350px;
  height: auto;
  padding: 30px;
  border-radius: 5px;
}
.login-wrap .login-form .login-button {
  width: 100%;
}

.login {
  display: flex;
  padding-top: 1px;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  background-image: url(../assets/img/login.jpg) !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat; /*防止图片重复 */
  padding-right: 150px;
  
}

.img-container {
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-left: 135px; 
  width: 100px;
  height: 100px;
}

.img-container img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.custom-input .el-input__prefix .el-icon-user-solid {
  color: rgb(245, 132, 13) !important;
}
.custom-input .el-input__prefix .el-icon-lock {
  color: rgb(245, 132, 13) !important;
}
label {
  color: rgb(218, 229, 234) !important; /* 强制设置标签字体颜色为黄色 */
}
</style>

